<template>
<div>
  <div class="table-data" v-show="tabShow">
    <div class="search-box">
      <el-input size="small" v-model="searchMap.keyword" placeholder="商品名称"></el-input>
      <el-input size="small" v-model="searchMap.order_sn" placeholder="订单编号"></el-input>
      <el-select v-model="searchMap.shipping_type" clearable placeholder="商品类型">
        <el-option label="物流商品" value="ship"></el-option>
        <el-option label="核销商品" value="code"></el-option>
      </el-select>
      <el-select v-model="searchMap.vendor_id" clearable placeholder="全部供应商">
        <el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="searchMap.shop_id" clearable placeholder="全部商家">
        <el-option v-for="item in businessList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="searchMap.status" clearable placeholder="订单状态">
        <el-option label="已支付" value="payed"></el-option>
      </el-select>
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      <!-- <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">批量发货</el-button> -->
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">导出excel</el-button>
    </div>

    <div class="manager-table" v-loading="loading" >
          <p v-if="tableData && tableData.length==0" style="text-align: center; line-height: 200px; font-size: 12px; color: #909399;">暂无数据</p>
          <table border="0" cellspacing="0" cellpadding="0" width="100%">
            <tbody v-for="(order,index) in tableData" :key="index" class="mt20">
              <tr bgcolor="#f4f4f4">
                <td colspan="2">
                  <div class="order-title">
                    <span>订单号：<a style="color:red">{{order.order_sn}}</a> </span>
                    <span>商户订单号：{{order.merchant_order_sn}} </span>
                    
                    <span>下单日期：{{order.pay_time}}</span>
                    <span>支付日期：{{order.create_time}}</span>
                    <span>{{order.merchant.name}}</span>
                    <span>{{order.shop.name}}</span>
                  
                  </div>
                </td>
                <td></td>
              </tr>
              <tr>
                <td>
                  <div class="onetd" v-for="(item,productIndex) in order.order_item" :key="productIndex" >
                    <div class="img">
                      <img :src="item.cover" width="60" height="60" />
                    </div>
                    <div class="con">
                      <p>{{item.goods_name}} </p>
                      <p>规格：{{item.spec_item}}</p>
                      <p>sku编码：{{item.sku}}</p>
                    </div>
                    <div class="pri">{{item.price}} &times; {{item.num}}</div>
                  </div>
                </td>
                <td>
                  <p>收货人：{{order.consignee}}</p>
                  <p>收货地址：{{order.address_full}}</p>
                  <p>收货电话：{{order.mobile}}</p>
                  <p>订单备注：{{order.remark?order.remark:"无"}}</p>
                  <p v-if="order.remark_template.length !== 0"><span>其他备注：</span><span  v-for="(mItem,mIndex) in order.remark_template" :key="mIndex">{{mItem.name}} : {{mItem.value}} </span></p>
                </td>
                <td>
                  <div class="btn">
                    <p><el-button size="mini" type="primary" plain v-if="order.extension && order.vendor_id !== 1 && order.extension.is_push == 0" @click="orderpush(order.id)">推送订单</el-button></p>
                    <p><router-link v-if="manage!='shop'" :to="{name:'orderDetail',query:{id:order.id}}" @click.native="handleDetail()" class="user-detail el-button el-button--primary el-button--mini">详情</router-link></p>
                    <p><el-button size="mini" v-if="order.status=='payed' && order.vendor_id == 1 && manage!='channel'" type="primary" @click.native="handleAdd(order)">发货</el-button></p>
                    <p><el-button size="mini" v-if="order.status=='sent'  && manage!='channel'" type="primary" @click="LogisticsorderNo(order.order_sn,order.extension)">物流单号</el-button></p>
                  </div>
                </td>
              </tr>
              <tr bgcolor="#f4f4f4">
                <td colspan="2">
                  <div class="order-title">
                    <span><a style="color:red">{{order.total_num}}</a> 件商品</span>
                    <span>总计：<a style="color:red">{{order.total}}</a></span>
                    <span>运费：<a style="color:red">{{order.shipping_fee}}</a></span>
                    <span>商品小计：<a style="color:red">{{order.goods_fee}}</a></span>
                    <span><a style="color:red">{{order.status_txt}}</a></span>
                    <span><a style="color:red">{{order.pay_type_txt}}</a></span>
                  </div>
                  
                </td>
                <td></td>
              </tr>
              <tr style="height:20px;"></tr>
            </tbody>
          </table>
          <div class="pagination" v-if="tableData && tableData.length">
            <el-pagination @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[10,30,50]"
              :page-size="size"
              layout="total,sizes,prev,pager,next,jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>
  </div>
  <router-view @loadData="loadData"></router-view>
  <EditDialog :isAdd="isAdd" :form="formData" @closeDialog="closeDialog" @loadData="loadData"></EditDialog>
</div>
</template>

<script lang="ts">
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
import EditDialog from "./EditDialog.vue";
import businessApi from "@/api/business";
import supplierApi from "@/api/supplier";
// import { State, Getter, Mutation, Action } from "vuex-class";
import orderApi from "@/api/order";
@Component({
  components: {EditDialog }
})
export default class orderList extends Vue {
  // @Getter("user") getUser: any;
  @Provide() dateTime: any = ["",""]; // 时间
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() Height:any=''
  @Provide() tableData: any = []; // 表格数据
  @Provide() newTableData: any = []; // 表格数据
  @Provide() multipleTable: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() isAdd: Boolean = false; // 是否展示添加弹窗
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Prop({}) tabVisible!: any;
  @Provide() supplierList: any=[];//供应商列表
  @Provide() businessList: any=[];//商家列表
  @Provide() state: boolean = true; // 黑白名单状态
  @Provide() orderInfo: any = []; 
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() manage: any = [];
  @Provide() searchMap:{
    keyword: string,
    order_sn: string,
    shipping_type:string,
    vendor_id:any,
    shop_id:any,
    status:string,
    search_key:string,
    start_time:string,
    end_time:string
  }={
    keyword: "",
    order_sn: "",
    shipping_type:"",
    vendor_id:"",
    shop_id:"",
    status:"payed" ,
    search_key:"",
    start_time:"",
    end_time:""
  }
  @Provide() searchMapS:{//供应商查询条件
    name: string,
    phone:string,
  }={
    name:'',
    phone:''
  }
  @Provide() searchMapB:{
    keyword: string,
    cate_id: string,
    is_child: any,
  }={
    keyword: "",
    cate_id: "",
    is_child: 0
  }
  @Provide() formData:any={
    id:"",
    shipping_company:"",
    shipping_no:""
  }
  @Watch("$route") handleRouteChange(to: any,form:any) {
    if(form.path!='/pastOrderList'){
      this.tabShow=this.tabVisible;
    }
  }

  handleDetail(){
    this.tabShow=false
  }
  // 发货
  handleAdd(data){
    this.formData.id=data.id
    this.isAdd=true;
  }
  // 关闭弹窗
  closeDialog() {
    this.isAdd = false;
  }
  
  created() {
    this.Height=document.body.offsetHeight - 323
    this.loadData();
    let manage:any=localStorage.getItem('manage')
    this.manage=JSON.parse(manage).type
    if(this.$route.path!='/pastOrderList'){
      this.tabShow=false
    }
  }

  loadData() {
    // 商家
    businessApi.businessList(1,999999,this.searchMapB)
      .then((res: any) => {
        this.businessList = res.data.data.list;
    });
    // 供应商
     supplierApi.supplierList(1,999999,this.searchMapS)
      .then((res: any) => {
        this.supplierList = res.data.data.lists.data;
    });
    orderApi.paseList(this.page,this.size,this.searchMap)
      .then((res: any) => { 
        this.tableData = res.data.data.list
        this.total = res.data.data.total
        this.loading=false
        if(this.tableData){
          res.data.data.list.forEach((items:any)=>{
            items.order_item.forEach((item:any)=>{
              item.count=items.order_item.length
            })
            if(items.extension!=null) {
              this.orderInfo.push(items.extension.shipping_company)
            }
          })
        };
      });
  }
  arraySpanMethod({row, column, rowIndex, columnIndex }) {
    if (columnIndex === 4 || columnIndex === 5|| columnIndex === 6 || columnIndex === 7) {
        for (let index in this.tableData) {
          if (this.tableData[index].id == row.order_id) {
             return [this.tableData[index].order_item.length, 1];
          }
        }
    }
  }
  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }
  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }
  handleSearch(): void {
    // 点击搜索
    this.page = 1;
    this.loadData();
  }
}
</script>

<style lang="scss" scoped="scoped">
  
    .manager-table {
      padding: 20px;
      background: #ffffff;
      	.allSelect {
				padding: 10px;
				line-height: 50px;
			}
			table {
				border-collapse: collapse;
				border-spacing: 0;
				font-size: 14px;
				color: #666;
			}
			table tr:first-child {
				background-color: #f5f7fa;
			}
			table tr:last-child:hover {
				background-color: #f5f7fa;
			}
			table tr {
				line-height: 24px;
			}
			table tr td {
				padding: 10px;
				border: solid #ebeef5;
				border-width: 1px 1px 1px 0px;
			}
			table tr td:last-child {
				border-right: none;
			}
			.order-title span {
				margin-right: 30px;
			}
			.onetd {
				display: flex;
				justify-content: space-around;
				margin-top: 10px;
			}
			.con {
				width: 60%;
				min-width: 300px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.btn {
				text-align: center;
			}
			.btn p {
				margin: 10px auto;
			}
    }
    .pagination {
      padding: 10px 0;
      overflow: hidden;
    }
    .el-pagination {
      float: right;
    }
    .mt20{
      margin-top: 20px;
    }
</style>
